<template>
  <div class="propjectAnalysis">
    <div class="propjectAnalysis-left">
      <!-- <Sel-Tree-List
        v-if="leftList.length"
        :data-list="leftList"
        :default-select-key="defaultSelectKey"
        :left-list-key-map="leftListKeyMap"
        @change="menuChange"
      /> -->
      <!-- <Silder-Tree-Bar /> -->
      <Common-Slider-Bar
        ref="silderBar"
        :item-view-option="{
          itemTitle: 'PROGRAMNAME',
          key: 'PROGRAMNAME',
          menuTitle: 'PROGRAMNAME',
        }"
        search-key="PROGRAMNAME"
        :request="{
          url: url + '/dynamicReportForm/queryBodyByProduce', method: 'post',
          data:data}"
        @select="menuChange"
      />
    </div>

    <div class="propjectAnalysis-rigth">
      <div class="propjectAnalysis-rigth-r1">
        <Project-Detail
          :left-list-key-map="leftListKeyMap"
          :project-data="leftClickItem"
        />
      </div>
      <div class="propjectAnalysis-rigth-r2">
        <Common-Propertypage
          v-if="leftClickItem"
          ref="Propertypage"
        />
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import baseUrl from '@/utils/processRequest1';
import CommonSliderBar from '@/components/CommonSliderBar';
// import { setToken, getToken } from '@/utils/auth.js';
// import { getMenuList } from '@/api/login';
// import SelTreeList from '@/views/propjectAnalysis/components/SelTreeList';
import ProjectDetail from '@/views/propjectAnalysis/components/ProjectDetail';
import CommonPropertypage from '@/views/digitalReport';
// import SilderTreeBar from '@/components/CommonSliderBar';
// import getConfig from '@/utils/processRequest1';
// import {
//   getQueryBodyByProduce
//   // getReportHeaderByTableId
// } from '@/api/dynamicInterface';

const leftListKeyMap = {
  label: 'PROGRAMNAME',
  key: 'ENTERPRISECODE',
  formGuid: 'FORMGUID',
  treeKey: 'ENTERPRISECODE',
  tableId: 'TABLEID',
  successPeopleCount: 'XZXM_CGRS', // 成功人数
  successFFZJE: 'XZXM_FFZRS', // 发放人数
  allPMoney: 'XZXM_FFZJE', // 发放总金额
  successSB: 'XZXM_SBRS', // 失败人数
  moneyRate: 'RATE' // 资金使用率
};
/* import {
  getHeaderByTableId,
  getParentHeader
} from '@/api/dynamicInterface'; */
// const deepListTreeData = function(data) {
//   if (Array.isArray(data)) {
//     data.forEach(item => {
//       deepListTreeData(item)
//     })
//   } else {
//     data.slots =
//   }
// }

export default {

  components: {
    // SelTreeList,
    ProjectDetail,
    CommonPropertypage,
    CommonSliderBar
    // SilderTreeBar
  },
  data() {
    return {
      leftListKeyMap, // 后面值可能会改, 所以作个索引
      url: '',
      user: {
        roleId: '',
        appId: ''
      },

      leftList: [],
      leftClickItem: null,
      defaultSelectKey: [],
      apps: '',
      data: {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 404,
        filterList: [{ col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE }]
      }
    };
  },

  created() {
    // setToken('isHideTop', '1');
    // this.collectData();
    this.init();
    // this.initData();
  },

  methods: {
    init() {
      baseUrl().then(res => {
        this.url = res.url;
        this.$nextTick(() => {
          this.$refs.silderBar.send();
        });
      });
    },
    // collectData() {
    //   this.user.roleId = getToken('xcRoleId');
    //   this.user.appId = getToken('appId');
    // },

    // initData() {
    //   this.getLeftSelectTreeList();
    // },

    // 左侧列表数据
    // getLeftSelectTreeList(title = '') {
    //   const tableId = '406';
    //   const filterList = [
    //     { col: leftListKeyMap.key, value: this.$route.query.ENTERPRISECODE }
    //     // { col: leftListKeyMap.label, value: this.$route.query.ENTERPRISECODE }
    //   ];
    //   getQueryBodyByProduce({
    //     tableId,
    //     filterList,
    //     pageIndex: 0,
    //     pageSize: 100,
    //     pageType: 1
    //   }).then(res => {
    //     const { data } = res;
    //     if (Array.isArray(data) && data.length) {
    //       this.leftList = data;
    //       this.menuChange(data[0]);
    //     } else {
    //       this.leftList = [];
    //     }
    //   });
    // },

    // 左侧 点击/取消点击
    menuChange(item) {
      this.leftClickItem = item.value;
      // this.leftClickItem = null;
      // this.$route.query.formGuid = null;
      // this.$route.query.title = null;
      // this.$route.query.tableId = null;
      // !menuid 暂时写死
      // this.$route.query.menuId = '1623138732610';

      // this.$route.query.filterEnterProseCode = this.$route.query.ENTERPRISECODE;
      // this.$route.query.filterEnterProseCodeCol = leftListKeyMap.key;
      // this.defaultSelectKey = [];
      // if (item.value) {
      //   setTimeout(() => {
      // this.$route.query.title = item[leftListKeyMap.label];
      // this.$route.query.formGuid = item[leftListKeyMap.formGuid];
      //       this.$route.query.tableId = item[leftListKeyMap.tableId];
      //       this.defaultSelectKey = [item[leftListKeyMap.treeKey]];
      //       this.leftClickItem = item.value;
      //     }, 200);
      //   }
      // }

    // findDeepLeftListItem(data, id, res) {
    //   if (res.value) {
    //     return;
    //   }
    //   if (Array.isArray(data)) {
    //     data.forEach(item => {
    //       this.findDeepLeftListItem(item, id, res);
    //     });
    //   } else {
    //     if (data[leftListKeyMap.key] === id) {
    //       res.value = data;
    //     } else {
    //       if (data.children) {
    //         this.findDeepLeftListItem(data.children, id, res);
    //       }
    //     }
    //   }
    }

  }
};
</script>

<style lang="scss" scoped>
.propjectAnalysis {
  $bg-color: #fff;
  $my-gap: 24px;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #E6E9F1;

  .propjectAnalysis-left {
    width: 300px;
    background-color: $bg-color;
    padding: ($my-gap / 2) 0;
    overflow: auto;
  }

  .propjectAnalysis-rigth {
    margin:  $my-gap;
    display: flex;
    flex-direction: column;
    width: calc(100% - 300px);

    > div {
      border-radius: 4px;
      background-color: $bg-color;
    }

    .propjectAnalysis-rigth-r1 {
      min-height: 200px;
      margin-bottom: $my-gap;
      padding: $my-gap;
    }

    .propjectAnalysis-rigth-r2 {
      flex: 1;
      overflow: auto;
    }
  }
}
</style>
